<template>
	<view class="logo">
		<view class="logo-hd">
			<image src="/static/img/zhuce.png" mode="widthFix"></image>
			<view class="logo-hd-h1">
				医圈子医院(医生)
			</view>
			<view class="logo-hd-h3">
				生命至上,医者仁心
			</view>
		</view>
		<view class="logo-center">
			<uni-forms ref="form" :modelValue="forms" :rules="rules">
				<uni-forms-item name="uloginname">
					<uni-easyinput v-model="forms.uloginname" placeholder="请输入账号" />
				</uni-forms-item>

				<uni-forms-item name="upassword">
					<uni-easyinput type="password" v-model="forms.upassword" placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="unickname">
					<uni-easyinput v-model="forms.unickname" placeholder="请输入昵称"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="phone">
					<uni-easyinput v-model="forms.phone" placeholder="请输入手机号" />
				</uni-forms-item>

				<uni-forms-item name="ucardid">
					<uni-easyinput v-model="forms.ucardid" placeholder="请输入身份证" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="logo-db">
			<view class="logo-db-dl" @click="getFn">
				返回
			</view>
			<view class="logo-db-dl" @click="getApp">
				完成
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
	} from 'vuex'
	export default {
		data() {
			return {
				test: '登录',
				form: {
					username: '', //用户名
					password: '', //密码
				},
				//注册
				forms: {
					uloginname: '', //名字
					unickname: '',
					upassword: '', //密码
					// usex: '',
					phone: '',
					ucardid: '', //身份证
				},
				rules: {
					uloginname: {
						rules: [{
							required: true,
							errorMessage: '请输入账号',
						}],
						validateTrigger: 'sunmit'
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							validateFunction: (rule, value, data, callback) => {
								const phone = /^1([38]\d|4[579]|5[0-35-9]|6[2567]|7[0-8]|9[189])\d{8}$/;

								if (value.length < 11) {
									callback("手机号仅支持中国大陆11位！");
									return false;
								}

								if (!phone.test(value)) {
									callback("手机号输入错误，请仔细检查重新输入！");
									return false;
								}
								return true;
							}
						}],
					},
					unickname: {
						rules: [{
							required: true,
							errorMessage: '请输入昵称',
						}]
					},
					upassword: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}, {
							validateFunction: function(rule, value, data, callback) {
								const regex = /^(?=.*[a-zA-Z])[a-zA-Z0-9]{8,12}$/;
								if (!regex.test(value)) {
									callback('密码必须包含字母且长度在8到12个字符之间')
									return false;
								}
								return true
							}
						}],
						validateTrigger: 'blur'
					},
					ucardid: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号码',
						}, {
							validateFunction: (rule, value, data, callback) => {

								// 正则表达式模式
								const pattern =
									/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

								// 验证身份证号码是否符合模式
								if (!pattern.test(value)) {
									callback('请填写正确的身份证格式')
									return false;
								}

								// 验证身份证号码的校验位
								const checkCodeArr = value.split('');
								const weightFactor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
								const checkCodeList = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3',
									'2'
								];
								let sum = 0;
								for (let i = 0; i < 17; i++) {
									sum += Number(checkCodeArr[i]) * weightFactor[i];
								}
								const mod = Number(sum) % 11;
								const checkCode = checkCodeList[Number(mod)];
								if (checkCode.toUpperCase() !== checkCodeArr[17].toUpperCase()) {
									callback('请填写正确的身份证格式')
									return false;
								}

								return true;
							}
						}]
					}
				},
				value: '',
			};
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			getFn() {
				uni.redirectTo({
					url: '/pages/logo/logo'
				});
			},
			/*  */
			getApp() {
				this.$refs.form.validate().then(res => {
					if (res) {
						this.request({
							url: '/app/user/register',
							method: 'POST',
							data: this.forms
						}).then(res => {
							console.log(res.msg, 66);
							console.log(res, 66);
							if (res.code == 200) {
								uni.showToast({
									icon: 'success',
									title: '注册成功'
								})
								this.index = 1
								uni.redirectTo({
									url: '/pages/logo/logo'
								});
							} else {
								uni.showToast({
									icon: 'error',
									title: res.msg
								})
							}
						})
					} else {
						console.log("失败");
					}
				}).catch(err => {
					console.log("失败");
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.logo {
		padding: 70rpx 30rpx;

		.logo-hd {
			text-align: center;

			image {
				width: 100rpx;
				margin: auto;
			}

			.logo-hd-h1 {
				font-size: 40rpx;
				color: #000000;
				font-weight: 600;
				letter-spacing: 5rpx;
				line-height: 64rpx;
			}

			.logo-hd-h3 {
				font-size: 27rpx;
				letter-spacing: 5rpx;
				color: #666;
			}
		}

		.logo-center {
			margin-top: 120rpx;

			::v-deep .uni-easyinput__content-input {
				border-bottom: 1rpx solid #D8D8D8;
				font-size: 30rpx;
				height: 80rpx;
			}

			::v-deep .is-input-border {
				border: 0;
			}

			.logo-center-nr {
				letter-spacing: 5rpx;
				font-size: 23rpx;
				display: flex;
				justify-content: space-between;
				color: #555;

				text {
					color: #0091FF;
				}

				.zhuces {
					color: #0091FF;

				}

				::v-deep .uni-radio-input {
					width: 30rpx;
					height: 30rpx
				}
			}
		}

		.logo-db {
			margin-top: 112rpx;

			.logo-db-dl {
				background-color: #0091FF;
				color: #fff;
				line-height: 90rpx;
				text-align: center;
				border-radius: 48rpx;
				margin-bottom: 30rpx;
			}
		}
	}

	.zhuces {
		display: flex;

		button {
			width: 46% !important;
		}
	}

	.loginContent {
		padding: 50rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20upx;

			view {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 150rpx;
		}

		.box-tu image {
			width: 184rpx;
			height: 184rpx;
			border-radius: 50%;
			margin-bottom: 162rpx;
		}

		uni-button {
			font-size: $uni-font-size-lg;
			font-weight: 600;
			color: #fff;
		}

		uni-button[type=default] {
			min-height: 90rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-color: red;
			margin-top: 20rpx;
		}

		button {
			width: 100%;
		}

		.haoma {
			color: #666;
			font-size: 35rpx;
			margin-top: 50rpx;
		}

		.haoma2 {
			min-height: 45px;
			height: 45px;
			line-height: 45px;
			background-color: #7976E9;
			text-align: center;
			color: #fff;
			margin-bottom: 20px;
		}

		.placeholder {
			color: #ccc;
		}

	}

	.password-login {
		padding: 30upx 0;

		.input-box {
			padding: 0 50upx;
			// border-bottom: 1upx solid #f0f0f0;
			margin-bottom: 50upx;

			input {
				// padding: 27upx 0;
				font-size: 40upx;
				color: #333;
				font-weight: bold;
				height: 100rpx !important;
			}

		}

		.zhucetiaoting {
			text-align: center;
			margin-bottom: 80upx;
			color: #7976E9;
			font-weight: 700;
		}

		.zhucea {
			margin-bottom: 20rpx;
		}
	}

	.zhuce {
		margin-top: 500rpx;
	}


	.uni-icons {
		margin-right: 10rpx;
	}

	.uni-input {
		height: 50 !important;
	}
</style>